/** 滚动语音的组件 */
<template>
	<transition
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
	>
	  <slot></slot>
	</transition>
</template>

<script>
import Velocity from "velocity-animate";
export default {
  props: {
    lineHeight: Number,
    len: Number,
    id: String
  },
  data() {
    return {};
  },
  methods: {
    handleBeforeEnter: function(el) {
      // el.style.opacity = 0;
      // el.style.transform = "translate3d(0,0,0)"
      let El = document.getElementById(this.id);
      El.style.transform = "translate3d(0,0,0)";
    },
    handleEnter: function(el, done) {
      let El = document.getElementById(this.id);
      let v = Math.round(Math.random() * (this.len - 1)); //随机取某条数据
      let lineHeight = this.lineHeight;
      let maxHeight = lineHeight * (this.len - 1);
      let times = 10;
      let maxValue = times * maxHeight + v * lineHeight;
      let value = 0;
      //选取了某条记录
      this.$emit("selectRecord", v);
      Velocity(
        el,
        {
          // opacity: 1
          tween: [maxValue, 0]
        },
        {
          duration: 3000,
          easing: "ease",
          // complete: done
          progress: function(elements, c, r, s, t) {
            if (t > times * maxHeight) {
              value = t - times * maxHeight;
            } else {
              value = t % maxHeight;
            }
            // el.style.transform = `translate3d(0,-${value}rem,0)`
            El.style.transform = `translate3d(0,-${value}rem,0)`;
          }
        }
      );
    },
    handleAfterEnter: function(el) {
      // console.log("动画结束")
    }
  }
};
</script>

<style lang="stylus" scoped>

</style>
